<template>
    <div class="products">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>产品服务</h1>
            <p>专业解决方案，创新技术服务</p>
        </div>

        <!-- 产品展示 -->
        <div class="section">
            <h2 class="section-title">产品展示</h2>
            <el-tabs type="border-card">
                <el-tab-pane
                    v-for="category in categories"
                    :key="category.id"
                    :label="category.name"
                >
                    <el-row :gutter="30">
                        <el-col
                            :xs="24"
                            :sm="12"
                            :md="8"
                            v-for="product in category.products"
                            :key="product.id"
                        >
                            <el-card class="product-card" :body-style="{ padding: '0px' }">
                                <img :src="product.image" class="product-image" />
                                <div class="product-info">
                                    <h3>{{ product.name }}</h3>
                                    <p>{{ product.description }}</p>
                                    <div class="product-features">
                                        <el-tag
                                            v-for="feature in product.features"
                                            :key="feature"
                                            size="small"
                                            class="feature-tag"
                                        >
                                            {{ feature }}
                                        </el-tag>
                                    </div>
                                    <el-button type="primary" @click="goToProductDetail(product)"
                                        >了解详情</el-button
                                    >
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 服务特点 -->
        <div class="section bg-gray">
            <h2 class="section-title">服务特点</h2>
            <el-row :gutter="30">
                <el-col
                    :xs="24"
                    :sm="12"
                    :md="6"
                    v-for="feature in serviceFeatures"
                    :key="feature.id"
                >
                    <div class="feature-card">
                        <el-icon :size="50" :color="'#409EFF'">
                            <component :is="feature.icon" />
                        </el-icon>
                        <h3>{{ feature.title }}</h3>
                        <p>{{ feature.description }}</p>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 解决方案 -->
        <div class="section">
            <h2 class="section-title">解决方案</h2>
            <el-timeline>
                <el-timeline-item
                    v-for="solution in solutions"
                    :key="solution.id"
                    :type="solution.type"
                    :color="solution.color"
                    :size="'large'"
                >
                    <el-card>
                        <template #header>
                            <h3>{{ solution.title }}</h3>
                        </template>
                        <p>{{ solution.description }}</p>
                        <div class="solution-tags">
                            <el-tag
                                v-for="tag in solution.tags"
                                :key="tag"
                                size="small"
                                :type="'info'"
                                effect="plain"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const categories = ref([
    {
        id: 1,
        name: '智能系统',
        products: [
            {
                id: 1,
                name: '智能管理系统',
                image: '/images/product1.svg',
                description: '提供全方位的企业智能化管理解决方案',
                features: ['数据分析', '流程优化', '智能决策'],
                specifications: {
                    '适用范围': '中大型企业',
                    '部署方式': '云端/本地部署',
                    '技术架构': '微服务架构',
                    '安全等级': '企业级安全防护'
                }
            },
            {
                id: 2,
                name: '数据分析平台',
                image: '/images/product2.svg',
                description: '强大的数据分析能力，助力企业决策',
                features: ['实时分析', '可视化报表', '预测分析'],
                specifications: {
                    '数据处理能力': '每秒百万级',
                    '存储方式': '分布式存储',
                    '分析模型': '机器学习/深度学习',
                    '接口支持': 'REST API'
                }
            }
        ]
    },
    {
        id: 2,
        name: '云服务',
        products: [
            {
                id: 3,
                name: '云存储服务',
                image: '/images/product3.svg',
                description: '安全可靠的云存储解决方案',
                features: ['高可用性', '数据加密', '快速部署'],
                specifications: {
                    '存储容量': '可扩展至PB级',
                    '数据备份': '多地域备份',
                    '访问方式': 'API/SDK',
                    '安全认证': 'ISO27001认证'
                }
            }
        ]
    }
]);

const serviceFeatures = ref([
    {
        id: 1,
        icon: 'Monitor',
        title: '专业监控',
        description: '7*24小时系统监控，确保服务稳定运行'
    },
    {
        id: 2,
        icon: 'Service',
        title: '技术支持',
        description: '专业团队提供全天候技术支持服务'
    },
    {
        id: 3,
        icon: 'Setting',
        title: '定制开发',
        description: '根据企业需求提供个性化定制服务'
    },
    {
        id: 4,
        icon: 'Connection',
        title: '系统集成',
        description: '支持与多种系统无缝集成对接'
    }
]);

const solutions = ref([
    {
        id: 1,
        title: '企业数字化转型',
        description: '通过数字化手段优化企业运营流程，提升管理效率',
        type: 'primary',
        color: '#409EFF',
        tags: ['流程优化', '数据管理', '协同办公']
    },
    {
        id: 2,
        title: '智能制造解决方案',
        description: '结合物联网技术，实现生产过程的智能化管理',
        type: 'success',
        color: '#67C23A',
        tags: ['生产管理', '质量控制', '设备监控']
    },
    {
        id: 3,
        title: '数据安全防护',
        description: '提供全方位的数据安全解决方案，保护企业核心资产',
        type: 'warning',
        color: '#E6A23C',
        tags: ['安全防护', '访问控制', '数据加密']
    }
]);

const router = useRouter();

const goToProductDetail = (product) => {
    router.push(`/products/${product.id}`);
};
</script>

<style scoped>
.products {
    min-height: 100vh;
}

.page-header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #409eff 0%, #2c3e50 100%);
    color: white;
    margin-bottom: 40px;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.section {
    padding: 60px 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #2c3e50;
}

.bg-gray {
    background-color: #f8f9fa;
}

.product-card {
    margin-bottom: 30px;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.product-info p {
    color: #666;
    margin-bottom: 15px;
}

.product-features {
    margin: 15px 0;
}

.feature-tag {
    margin-right: 8px;
    margin-bottom: 8px;
}

.feature-card {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card h3 {
    margin: 20px 0;
    color: #2c3e50;
}

.feature-card p {
    color: #666;
}

.solution-tags {
    margin-top: 15px;
}

.solution-tags .el-tag {
    margin-right: 8px;
}

.product-detail {
    padding: 20px;
}

.detail-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 8px;
}

.detail-content h3 {
    margin: 20px 0 10px;
    color: #2c3e50;
}

.detail-content ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.detail-content li {
    margin-bottom: 8px;
    color: #666;
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }

    .section {
        padding: 40px 15px;
    }

    .section-title {
        font-size: 1.5rem;
    }
}
</style>
